<template>
  <div class="sales_filing_container">
    <div class="first_wrap">
      <span style="margin-left: 0">编号</span>
      <el-input v-model="numberInputValue" clearable></el-input>
      <span>职员名称</span>
      <el-input v-model="officeNameInputValue" clearable></el-input>
      <span>手机号</span>
      <el-input v-model="phoneInputValue" clearable maxlength="11"></el-input>
      <span>生日</span>
      <el-select v-model="birthdayPullSelectValue" placeholder="请选择">
        <el-option
          v-for="item in birthdayPullSelectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span>地址</span>
      <el-input
        v-model="addressInputValue"
        class="input_320"
        clearable
      ></el-input>
      <span>备注</span>
      <el-input
        v-model="remarkInputValue"
        class="input_320"
        clearable
      ></el-input>
    </div>
    <!-- 第二行按钮容器 -->
    <div class="second_wrap">
      <el-button type="primary" icon="el-icon-search" @click="queryBtnClick"
        >查询</el-button
      >
      <el-button icon="el-icon-folder-checked" @click="keepBtnClick"
        >保存</el-button
      >
      <el-button icon="el-icon-delete" @click="handleDeleteBtnClick"
        >删除</el-button
      >
    </div>
    <!-- 表格区域 -->
    <div class="table_container">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '30px' }"
        highlight-current-row
        @row-click="tableRowClick"
        height="70vh"
      >
        <el-table-column prop="personnelNo" label="编号"> </el-table-column>
        <el-table-column prop="personnelName" label="职员名称">
        </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="birthday" label="生日"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="page_container1">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 这个页面接口的引入
import {
  new_build_vip_personnel,
  query_vip_personnel,
  delete_vip_personnel_api
} from '../../../../../request/store/store_baseInfo_request.js'
import { verifyPhone } from '@/util/regular'
export default {
  data() {
    return {
      // 默认显示第一页
      currentPage4: 1,
      limit: 20, // 分页条数
      page: 1, // 分页数
      total: 0,
      // 保存表格中，每一项拿到的vip职员的id
      personnelVipId: '',
      // 编号输入框输入的值
      numberInputValue: '',
      // 职员名称输入框输入的值
      officeNameInputValue: '',
      // 手机输入框输入的值

      phoneInputValue: '',
      // 生日下拉框，选中的值和数组
      birthdayPullSelectValue: '',
      birthdayPullSelectList: [
        {
          value: '1月',
          label: '1月'
        },
        {
          value: '2月',
          label: '2月'
        },
        {
          value: '3月',
          label: '3月'
        },
        {
          value: '4月',
          label: '4月'
        },
        {
          value: '5月',
          label: '5月'
        },
        {
          value: '6月',
          label: '6月'
        },
        {
          value: '7月',
          label: '7月'
        },
        {
          value: '8月',
          label: '8月'
        },
        {
          value: '9月',
          label: '9月'
        },
        {
          value: '10月',
          label: '10月'
        },
        {
          value: '11月',
          label: '11月'
        },
        {
          value: '12月',
          label: '12月'
        }
      ],
      // 地址输入框输入的值
      addressInputValue: '',
      // 备注输入框输入的值
      remarkInputValue: '',
      // 表格数据
      tableData: []
    }
  },
  async created() {},
  methods: {
    // 保存按钮被点击的时候触发的函数，新建一个vip职员
    async keepBtnClick() {
      if (!this.numberInputValue) return this.$message.warning('编号不能为空')
      if (!this.officeNameInputValue)
        return this.$message.warning('职员名称不能为空')
      if (!verifyPhone(this.phoneInputValue))
        return this.$message.warning('手机号码格式错误')
      const paramsObj = {
        address: this.addressInputValue, // 地址
        birthday: this.birthdayPullSelectValue, // 生日
        personnelName: this.officeNameInputValue, // 职员名称
        personnelNo: this.numberInputValue, // 职员编号
        phone: this.phoneInputValue, // 手机号
        remark: this.remarkInputValue // 备注
      }

      const { data } = await new_build_vip_personnel(paramsObj)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.queryBtnClick()
        this.clearInputData()
      }
    },
    // 清空所有数据的方法
    clearInputData() {
      this.numberInputValue = ''
      this.officeNameInputValue = ''
      this.phoneInputValue = ''
      this.birthdayPullSelectValue = ''
      this.addressInputValue = ''
      this.remarkInputValue = ''
    },
    // 每页显示多少条发生概不的时候，触发的函数
    handleSizeChange(value) {
      // 直接改全局显示多少条数据就行
      this.limit = value
      this.queryBtnClick()
    },
    handleCurrentChange(value) {
      this.page = value
      this.queryBtnClick()
    },
    // 点击查询按钮的时候，触发的函数
    async queryBtnClick() {
      // 获取直营店编号,只要用户登录，肯定是有sdNo
      // console.log(localStorage.getItem('sdNo'))
      // const sdNo = localStorage.getItem('sdNo')
      //  ui备注，手机号和职员名称也是可以作为查询条件
      const queryParamsObj = {
        phone: this.phoneInputValue, // 手机号
        personnelNo: this.officeNameInputValue, // 职员名称
        directSaleNo: this.$store.state.currentStoreData.no, // 获取直营店编号,只要用户登录，肯定是有sdNo
        page: this.page,
        limit: this.limit
      }
      const { data } = await query_vip_personnel(queryParamsObj)
      if (data && data.code === 200) {
        // console.log(data, 'query_vip_personnel')
        // 把拿到的数组给表格(后端营业员没有返回给我)
        this.tableData = data.data
        this.total = data.total
      }
    },
    // 表格的行被点击的时候，触发的函数
    tableRowClick(row) {
      // console.log(row, 'tableRowClick')
      this.personnelVipId = row.id
    },
    // 点击删除的时候，触发的函数
    handleDeleteBtnClick() {
      if (!this.personnelVipId) return this.$message.error('请选择要删除的数据')

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await delete_vip_personnel_api(this.personnelVipId)
          if (data && data.code === 200) {
            this.$message.success(data.mag)
            this.queryBtnClick()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      // //删除vip职员的接口
      // const { data: res } = await delete_vip_personnel_api(this.personnelVipId)
      // console.log(res, 'handleDeleteBtnClick')

      // if (!res || res.code !== 200)
      //   return this.$message.warning('删除失败，请稍后再试')
      // // 删除成功，之后，再调用一遍查询的方法，更新表格数据
      // this.queryBtnClick()
    }
  }
}
</script>

<style lang="less" scoped>
.first_wrap {
  span {
    margin-right: 8px;
    // 让所有的span都有这个left边距
    &:nth-child(2n - 1) {
      margin-left: 16px;
    }
  }
  .span_left_16px {
    margin-left: 16px;
  }
  // input输入框的样式
  /deep/.el-input {
    // 宽度生效
    width: 160px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
    .el-input__icon {
      // line-height: unset;
      line-height: 35px;
    }
  }
}
.second_wrap {
  margin-top: 16px;
}
.table_container {
  margin-top: 16px;
  height: 70vh;
}
// 地址/备注输入框的独立样式
.input_320 {
  // 宽度生效
  width: 320px !important;
  height: 32px;
  .el-input__inner {
    height: 32px;
  }
}
// 分页的样式
.page_container1 {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  /deep/.el-input--suffix {
    .el-input__inner {
      width: 100px;
    }
  }
}
</style>
